<template>
	<div class="fd-noticeTip">
			<transition name='noticeTip-fade'>
				<p class="center-p" v-if="type=='center'" v-show='ifShow' v-bind:style='tipStyle'>{{message}}</p>
			</transition>

			<transition name='noticeTip-fade'>
				<div class="top-noticeTip" v-if="type=='top'" v-show='ifShow' v-bind:style='tipStyle' ref='noticeTipTop'><p class="top-p" >{{message}}</p><span @click='SpanClick'>&times;</span></div>
			</transition>

			<transition name='noticeTip-fade'>
				<p class="bottom-p" v-if="type=='bottom'" v-show='ifShow' v-bind:style='tipStyle'>{{message}}</p>
			</transition>
	</div>
</template>
<script>
	export default {
		name: 'noticeTip',
		props:{
			message:{type:String},
			type:{type:String},
			color:{type:String},
			backgroundColor:{type:String},
			tipStyle:{type:Object},
			ifShow:{
				type:Boolean,
				default: false
			},
			opts:{
				type:Function
			}
		},
		methods: {
			SpanClick() {
				this.ifShow = false
				this.opts()
			}
		}
	}
</script>
<style>
.fd-noticeTip{
  display: flex;
  justify-content:center;
}
</style>